<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="status-bar"></view>
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<view class="nav-title">我的奖励</view>
				<view class="nav-right">
					<text class="more-icon">⋯</text>
				</view>
			</view>
		</view>

		<!-- 佣金概览区域 -->
		<view class="commission-overview">
			<view class="overview-card">
				<view class="current-commission">
					<text class="commission-label">当前奖励金额 (元)</text>
					<view class="help-icon" @click="showCommissionHelp">
						<text class="help-text">?</text>
					</view>
				</view>
				<text class="commission-amount">0</text>
				<view class="commission-stats">
					<view class="stat-item">
						<text class="stat-value">¥ 0</text>
						<text class="stat-label">昨日收益</text>
					</view>
					<view class="withdraw-btn" @click="withdrawCommission">
						<text class="withdraw-text">立即提现</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">¥ 0</text>
						<text class="stat-label">累计已提</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="function-menu">
			<view class="menu-item" @click="navigateTo('invite-friends')">
				<view class="menu-icon invite-icon">
					<text class="icon-text">👥</text>
				</view>
				<view class="menu-info">
					<text class="menu-title">邀请好友</text>
					<text class="menu-desc">邀请好友获得丰厚奖励</text>
				</view>
				<view class="menu-arrow">
					<text class="arrow-icon">→</text>
				</view>
			</view>

			<view class="menu-divider"></view>

			<view class="menu-item" @click="navigateTo('commission-record')">
				<view class="menu-icon record-icon">
					<text class="icon-text">📊</text>
				</view>
				<view class="menu-info">
					<text class="menu-title">收益记录</text>
					<text class="menu-desc">查看详细收益明细</text>
				</view>
				<view class="menu-arrow">
					<text class="arrow-icon">→</text>
				</view>
			</view>

			<view class="menu-divider"></view>

			<view class="menu-item" @click="navigateTo('withdraw-record')">
				<view class="menu-icon withdraw-icon">
					<text class="icon-text">💰</text>
				</view>
				<view class="menu-info">
					<text class="menu-title">提现记录</text>
					<text class="menu-desc">查看提现历史记录</text>
				</view>
				<view class="menu-arrow">
					<text class="arrow-icon">→</text>
				</view>
			</view>
		</view>

		<!-- 奖励规则说明 -->
		<view class="rules-section">
			<view class="rules-header">
				<text class="rules-title">奖励规则</text>
				<view class="title-line"></view>
			</view>
			<view class="rules-card">
				<view class="rule-item">
					<view class="rule-number">1</view>
					<text class="rule-text">邀请好友注册成功，获得5元奖励</text>
				</view>
				<view class="rule-item">
					<view class="rule-number">2</view>
					<text class="rule-text">好友首次下单，额外获得10元奖励</text>
				</view>
				<view class="rule-item">
					<view class="rule-number">3</view>
					<text class="rule-text">好友每次消费，获得订单金额2%的奖励</text>
				</view>
				<view class="rule-item">
					<view class="rule-number">4</view>
					<text class="rule-text">奖励金额满50元即可申请提现</text>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state">
			<view class="empty-icon">💰</view>
			<text class="empty-text">暂无奖励</text>
			<text class="empty-desc">邀请好友开始赚取奖励吧</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commissionData: {
					currentAmount: 0,
					yesterdayEarning: 0,
					totalWithdrawn: 0
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			
			showCommissionHelp() {
				uni.showModal({
					title: '奖励说明',
					content: '通过邀请好友、推广商品等方式获得的奖励金额，满50元即可提现到微信或支付宝',
					showCancel: false
				});
			},
			
			withdrawCommission() {
				if (this.commissionData.currentAmount < 50) {
					uni.showToast({
						title: '提现金额不足50元',
						icon: 'none'
					});
					return;
				}
				
				uni.showModal({
					title: '提现申请',
					content: `确认提现 ¥${this.commissionData.currentAmount} 吗？`,
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '提现申请已提交',
								icon: 'success'
							});
						}
					}
				});
			},
			
			navigateTo(page) {
				uni.showToast({
					title: `${page} 功能开发中`,
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss">
.container {
	background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
	min-height: 100vh;
}

/* 导航栏 */
.nav-bar {
	background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
	position: relative;
}

.status-bar {
	height: calc(var(--status-bar-height, 0) + 20rpx);
	background: transparent;
}

.nav-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
}

.nav-left, .nav-right {
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50rpx;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	position: relative;
}

.nav-left::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50rpx;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.nav-left:active::before {
	opacity: 1;
	transform: scale(1);
}

.nav-left:active {
	transform: scale(0.95);
}

.back-icon {
	font-size: 48rpx;
	color: white;
	font-weight: bold;
	z-index: 1;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.more-icon {
	font-size: 36rpx;
	color: white;
	z-index: 1;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.nav-title {
	font-size: 36rpx;
	font-weight: 700;
	color: white;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

/* 佣金概览区域 */
.commission-overview {
	margin: 30rpx;
}

.overview-card {
	background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
	border-radius: 20rpx;
	padding: 40rpx 35rpx;
	box-shadow: 0 8rpx 25rpx rgba(30, 60, 114, 0.3);
	color: white;
}

.current-commission {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15rpx;
	margin-bottom: 20rpx;
}

.commission-label {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
}

.help-icon {
	width: 40rpx;
	height: 40rpx;
	border-radius: 20rpx;
	border: 2rpx solid rgba(255, 255, 255, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.help-text {
	font-size: 24rpx;
	color: white;
	font-weight: bold;
}

.commission-amount {
	font-size: 80rpx;
	font-weight: 700;
	text-align: center;
	margin-bottom: 40rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.commission-stats {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.stat-item {
	text-align: center;
}

.stat-value {
	font-size: 32rpx;
	font-weight: 600;
	display: block;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
}

.withdraw-btn {
	background: #27ae60;
	padding: 20rpx 40rpx;
	border-radius: 25rpx;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4rpx 12rpx rgba(39, 174, 96, 0.3);
}

.withdraw-btn:active {
	background: #229954;
	transform: translateY(2rpx);
}

.withdraw-text {
	font-size: 28rpx;
	color: white;
	font-weight: 600;
}

/* 功能菜单 */
.function-menu {
	background: white;
	margin: 0 30rpx 30rpx;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 35rpx;
	cursor: pointer;
	transition: all 0.3s ease;
}

.menu-item:active {
	background: rgba(30, 60, 114, 0.05);
	transform: translateX(5rpx);
}

.menu-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 25rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.invite-icon {
	background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

.record-icon {
	background: linear-gradient(135deg, #4ecdc4, #44a08d);
}

.withdraw-icon {
	background: linear-gradient(135deg, #feca57, #ff9ff3);
}

.icon-text {
	font-size: 28rpx;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
}

.menu-info {
	flex: 1;
}

.menu-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 8rpx;
	display: block;
}

.menu-desc {
	font-size: 24rpx;
	color: #7f8c8d;
	line-height: 1.4;
}

.menu-arrow {
	margin-left: 20rpx;
}

.arrow-icon {
	font-size: 28rpx;
	color: #bdc3c7;
	font-weight: 300;
	transition: all 0.3s ease;
}

.menu-item:active .arrow-icon {
	color: #1e3c72;
	transform: translateX(3rpx);
}

.menu-divider {
	height: 1rpx;
	background: linear-gradient(90deg, transparent, #ecf0f1, transparent);
	margin: 0 35rpx;
}

/* 奖励规则 */
.rules-section {
	margin: 0 30rpx 30rpx;
}

.rules-header {
	display: flex;
	align-items: center;
	gap: 15rpx;
	margin-bottom: 20rpx;
}

.rules-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #2c3e50;
}

.title-line {
	width: 40rpx;
	height: 3rpx;
	background: linear-gradient(90deg, #1e3c72, #2a5298);
	border-radius: 2rpx;
}

.rules-card {
	background: white;
	border-radius: 20rpx;
	padding: 35rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid rgba(0, 0, 0, 0.04);
}

.rule-item {
	display: flex;
	align-items: flex-start;
	gap: 20rpx;
	margin-bottom: 25rpx;
}

.rule-item:last-child {
	margin-bottom: 0;
}

.rule-number {
	width: 40rpx;
	height: 40rpx;
	border-radius: 20rpx;
	background: linear-gradient(135deg, #1e3c72, #2a5298);
	color: white;
	font-size: 24rpx;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.rule-text {
	font-size: 28rpx;
	color: #2c3e50;
	line-height: 1.5;
	flex: 1;
	margin-top: 8rpx;
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 80rpx 60rpx;
	background: white;
	margin: 0 30rpx 40rpx;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.empty-icon {
	font-size: 100rpx;
	margin-bottom: 30rpx;
	display: block;
	opacity: 0.6;
}

.empty-text {
	font-size: 32rpx;
	color: #2c3e50;
	font-weight: 600;
	margin-bottom: 15rpx;
	display: block;
}

.empty-desc {
	font-size: 26rpx;
	color: #7f8c8d;
	line-height: 1.4;
}
</style>